<script setup>
import { ref } from 'vue'
import { useResumeStore } from '@/stores/resume'
const { activeResume } = useResumeStore()
import { useResumeListStore } from '../../stores/resumeList'
const { resumeList } = useResumeListStore()
import {useBaseInfoStore } from '@/stores/baseInfo'
import { templateMap } from '@/views/myResume/templateMap'
import { useRouter } from 'vue-router'
const  emits = defineEmits(['exportResume'])
const router = useRouter()
const { baseInfo } = useBaseInfoStore()
// 新增：控制输入窗口显示
const showImportInput = ref(false)
const importInputValue = ref('')
// 处理导入选项变化
const handleImportChange = (value) => {
  if (value === '1') { // 从JSON导入
    showImportInput.value = true
  } else {
    showImportInput.value = true
    importInputValue.value = JSON.stringify(baseInfo)
  }
}

// 处理导入确认
const handleImportConfirm = () => {
   const parsedData = JSON.parse(importInputValue.value)
  // 保持响应式的方式替换对象
  Object.assign(activeResume.baseInfo, parsedData)
  showImportInput.value = false
  importInputValue.value = ''
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 导出选项
const exportOptions = [
  {
    value: '1',
    label: 'PDF导出',
  },
  {
    value: '2',
    label: '浏览器导出',
  },
  {
    value: '3',
    label: 'JSON导出',
  }
]

// 导入选项
const importOptions = [
  {
    value: '1',
    label: '从JSON导入',
  },
  {
    value: '2',
    label: '从我的信息导入',
  }
]

const changeTemplate = (e) => {
  activeResume.resumeInfo.templateId=e
  router.push({
    path: "/resumeMaker"+(templateMap[e]?templateMap[e]:''),
    query: {
      resumeId: activeResume.resumeInfo.resumeId,
    },
  })
}

const selectedTemplate = ref('经典模板') // 默认选择第一个模板
</script>

<template>
    <div class="header-main">
        <div class="header-left">
            <div class="header-logo">
                RM简历制作
            </div>
            <el-button 
                class="back-button" 
                @click="goBack"
                type="primary"
                plain
                circle>
                <el-icon><ArrowLeft /></el-icon>
            </el-button>
        </div>
        <div class="header-right">
            <!-- 简历名称输入 -->
            <div class="header-title">
                <el-input 
                    style="width: 200px;" 
                    v-model="activeResume.resumeInfo.resumeName"
                    placeholder="输入简历名称">
                </el-input>
            </div>
            
            <!-- 导入按钮 -->
            <div class="header-import">
                <el-select 
                    clearable 
                    placeholder="导入" 
                    style="width: 120px"
                    @change="handleImportChange">
                    <el-option 
                        v-for="item in importOptions" 
                        :key="item.value" 
                        :label="item.label" 
                        :value="item.value"/>
                </el-select>
                
                <!-- 新增：导入输入窗口 -->
                <el-dialog
                    v-model="showImportInput"
                    title="从JSON导入"
                    width="500px"
                    :close-on-click-modal="false">
                    <el-input
                        v-model="importInputValue"
                        type="textarea"
                        :rows="10"
                        placeholder="请输入JSON内容"/>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="showImportInput = false">取消</el-button>
                            <el-button type="primary" @click="handleImportConfirm">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            
            <!-- 模板选择 -->
            <div class="header-template">
                <el-select 
                    v-model="selectedTemplate" 
                    placeholder="选择模板"
                    style="width: 120px"
                    @change="changeTemplate">
                    <el-option 
                        v-for="item in resumeList" 
                        :key="item.id" 
                        :label="item.name" 
                        :value="item.id">
                        <div class="template-option">
                            <span>{{ item.name }}</span>
                        </div>
                    </el-option>
                </el-select>
            </div>
            
            <!-- 导出选项 -->
            <div class="header-export">
                <el-select 
                    clearable 
                    placeholder="导出" 
                    style="width: 100px"
                    @change="emits('exportResume', $event)">
                    <el-option 
                        v-for="item in exportOptions" 
                        :key="item.value" 
                        :label="item.label" 
                        :value="item.value"/>
                </el-select>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* 基础样式 */
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: rgb(23, 23, 23);
    height: 64px;
    border-bottom: 1px solid rgb(31, 41, 55);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.back-button {
    background-color: transparent;
    border-color: rgb(31, 41, 55);
    color: #fff;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-title, 
.header-import,  /* 新增导入样式 */
.header-template, 
.header-export {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 输入框样式 */
:deep(.header-right .el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgb(31, 41, 55);
  border-radius: 10px;
}

:deep(.header-right .el-input__inner) {
  color: rgb(216, 216, 216) !important;
  width: 100%;
  height: 100%;
  font-size: 16px;
  padding: 10px 0;
}

/* 下拉选择样式 */
:deep(.header-right .el-select__wrapper) {
  background-color: var(--el-color-primary) !important;
}

:deep(.header-right .el-popper) {
  background-color: var(--el-color-primary) !important;
}

/* 模板选择选项样式 */
.template-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-preview {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-main {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }
    
    .header-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .header-right {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    
    .header-title {
        flex: 1;
        min-width: 100%;
        order: 1;
    }
    
    .header-import,
    .header-template,
    .header-export {
        width: calc(33.33% - 10px);
        order: 2;
    }
    
    :deep(.header-right .el-input) {
        width: 100% !important;
    }
}
</style>